<template>
  <div>
    <h2 style="text-align: center;">短信验证登录/注册</h2>
    <p style=" text-align: center;padding:10px">
      新手机号将注册，请详读
      <span style="color:#46c65e">豆瓣使用协议、豆瓣个人信息保护政策</span>
    </p>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="+86"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号'},
          { pattern:/^1[3-9]\d{9}$/,
            message: '手机号格式不正确' 
          }
          ]"
        />
        <!-- <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />-->
        <van-cell-group inset>
          <van-field v-model="sms" center clearable label="短信验证码" placeholder="验证码">
            <template #button>
              <van-button size="small" type="primary" @click="sendcode">{{msg}}</van-button>
            </template>
          </van-field>
        </van-cell-group>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button  block type="success" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <div style="display: flex;
     justify-content: space-between;padding:20px">
        <p>账号密码登录</p>
        <p>验证码收不到？</p>
    </div>
    <div style="text-align: center;">
        <p>第三方登录</p>
    </div>
    <div style="display: flex;
     justify-content: space-around;">
        <img style="width:50px;height:40px" src="../../assets/a1.jpg" alt="">
        <img style="width:50px;height:40px" src="../../assets/a2.jpg" alt="">
    </div>
  </div>
</template>
<script setup>
import request from '@/utlis/request.js'
import { ref } from "vue";
import md5 from 'blueimp-md5'
import { useRouter } from 'vue-router'
const router = useRouter()
import { showSuccessToast, showFailToast } from 'vant';
const username = ref("");
const sms=ref('')
const msg=ref('获取验证码')
const time=ref(null)
const count=ref(60)
const onSubmit = values => {
  console.log("submit", values);
  request.post('/login',{
  username:username.value,
  password:md5('123456789'),
  sms:sms.value
  }).then(res=>{
     if(res.data.code==200)
     {
        //提示登录成功
        showSuccessToast(res.data.message);
        //储存token和username
        localStorage.setItem('token',res.data.token)
        localStorage.setItem('username',username.value)
        //登录成功后跳转到我的页面
        router.push('/user')
     }
     else
     {
        showFailToast(res.data.message);
     }
  })
};
const sendcode=()=>{
    request.get('code').then((res) => {
        if(res.data.code==200)
        {
            sms.value=res.data.data
        }
    })
    time.value=setInterval(()=>{
        count.value--
        if(count.value==0)
        {
            clearInterval(time.value)
            msg.value='获取验证码'
            count.value=60
        }
        else
        {
           msg.value=count.value+'s后重新发送'
        }
    },1000)
}
</script>